import 'package:cached_network_image/cached_network_image.dart';
import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:mziot/app/config/design.dart';
import 'package:mziot/app/routes/app_pages.dart';
import 'package:mziot/generated/assets.dart';
import 'package:mziot/generated/locales.g.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import '../controllers/circle_controller.dart';

class CircleView extends GetView<CircleController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          LocaleKeys.circle_title.tr,
        ),
      ),
      body: SafeArea(
        child: Container(
          color: MColor.xFFF2F2F2,
          child: Obx(() {
            var count = 0;
            if (controller.images.value.isNotEmpty) {
              count += 1;
            }
            if (controller.dataList.value.isNotEmpty) {
              count += controller.dataList.value.length;
            }
            return SmartRefresher(
              controller: controller.controller,
              onRefresh: () => controller.refreshData(),
              onLoading: () => controller.loadData(),
              child: ListView.builder(
                itemCount: count,
                padding: EdgeInsets.only(bottom: 12),
                itemBuilder: (ctx, index) {
                  if (index == 0 && controller.images.value.isNotEmpty) {
                    return Container(
                      height: 140 * Get.width / 375.0,
                      child: Swiper(
                        itemBuilder: (BuildContext context, int index) {
                          return Image.network(
                            controller.images[index],
                            fit: BoxFit.cover,
                          );
                        },
                        itemCount: controller.images.length,
                      ),
                    );
                  }
                  var tempIndex = index;
                  if (controller.images.value.isNotEmpty) {
                    tempIndex = index - 1;
                  }
                  return GestureDetector(
                    onTap: () {
                      final model = controller.dataList.value[tempIndex];
                      int id = model.id ?? 0;
                      Get.toNamed(Routes.CIRCLE_DETAIL,
                              parameters: {'id': id.toString(), 'title': model.mainTitle ?? ''})
                          ?.then((value) {
                        controller.refreshData();
                      });
                    },
                    child: _itemView(tempIndex),
                  );
                },
              ),
            );
          }),
        ),
      ),
    );
  }

  Widget _itemView(int index) {
    final model = controller.dataList.value[index];
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
      ),
      margin: EdgeInsets.only(top: 12, left: 12, right: 12),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 12, left: 12, right: 8),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(8),
              clipBehavior: Clip.hardEdge,
              child: CachedNetworkImage(
                imageUrl: model.mainImg ?? '',
                width: 76,
                height: 76,
                fit: BoxFit.cover,
              ),
            ),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.only(top: 16, bottom: 12, right: 12),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    model.mainTitle ?? '-',
                    style: MFont.semi_Bold15.apply(color: MColor.xFF333333),
                  ),
                  SizedBox(height: 8),
                  Text(
                    model.shortContent ?? '',
                    style: MFont.regular13.apply(color: MColor.xFF666666),
                  ),
                  SizedBox(height: 8),
                  Text(
                    model.publicTime ?? '-',
                    style: MFont.regular10.apply(color: MColor.xFF999999),
                  ),
                  SizedBox(height: 16),
                  Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      _infoView(model.commentNum ?? 0, true),
                      SizedBox(width: 25),
                      GestureDetector(
                        child: _infoView(model.likedNum ?? 0, false),
                        onTap: () {
                          controller.fetchAgree(model.id ?? 0);
                        },
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _infoView(int num, bool isComment) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        Image.asset(isComment ? Assets.imagesCircleComment : Assets.imagesCircleAgreeNum,
            width: 15, height: 15),
        SizedBox(width: 4),
        Text(
          '$num',
          style: MFont.regular11.apply(color: MColor.xFF666666),
        ),
      ],
    );
  }
}
